<template>
    <div ref="dom"></div>
</template>

<script>
import echarts from 'echarts'
import { on, off } from '@/libs/tools'
export default {
  name: 'serviceRequests',
  data () {
    return {
      dom: null
    }
  },
  methods: {
    resize () {
      this.dom.resize()
    },
    init (option) {
      this.$nextTick(() => {
        this.dom = echarts.init(this.$refs.dom)
        this.dom.setOption(option)
        on(window, 'resize', this.resize)
      })
    },
    get_time_data () {
      var myDate = new Date();
      let hours = myDate.getHours()
      let data = []
      for (let i=0;i<hours+1;i++){
        if(i<10){
          data[i] = "0"+i+":00"
        }else{
          data[i] = i+":00"
        }
      }
      return data;
    },
    get_show_data(time_data) {
      let series_data =[]
      for(let i=0;i<time_data.length;i++){
        series_data[i] = i+100*i
      }
      return series_data;
    },
    setLineData(){
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        grid: {
          top: '3%',
          left: '1.2%',
          right: '1%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '监控统计',
            type: 'line',
            stack: '总量',
            areaStyle: { normal: {
                color: '#2d8cf0'
              } },
            data:[]
          },
        ]
      }
      let time_duan = this.get_time_data()
      option.xAxis[0].data = time_duan;
      this.$axios.get('/api/line',{},{
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).then((response)=>{
        if(response.data.success){
          let time_duan = this.get_time_data()
          option.xAxis[0].data = time_duan;
          let res_data = response.data.data
          let tmp_data = []
          for (let i = 0; i < option.xAxis[0].data.length; i++) {
            tmp_data[i] = res_data[i]
          }
          option.series[0].data = tmp_data
          this.init(option)
        }
      }).catch((response)=>{
        console.log(response)
      });
    }
  },
  mounted () {
    this.setLineData()
    setInterval(() => {
      this.setLineData()
    },1000*60)
  },
  beforeDestroy () {
    off(window, 'resize', this.resize)
  }
}
</script>
